<template>
	<!-- 默认布局 -->
	<header class="adminui-header" style="height: 60px;box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;
	background-color: #fff;margin-bottom: 2px;z-index: 1002;">
			<div style="width: 280px;">
				<div class="help-side-split-top">
					<!--
						<router-link :to="$CONFIG.DASHBOARD_URL">
						<img class="logo" :title="$CONFIG.APP_NAME" src="img/logo-r.png">
					</router-link>
					-->
				</div>
				<div class="logo-bar" style="font-size: 18px;color:#668eff;font-weight: 530;padding-left: 10px;">
					<span>{{ "帮助中心" }}</span>
				</div>
			</div>
			<div :style="'width:'+rwidth+'px;float: left;text-align: left;'">
				<View v-for="item in options" :key="item.value" :label="item.value">
					<view :class="currtop==item.value?'topitem topAction':'topitem'" @click="changetop(item)">{{item.label}}</view>
				</View>


			</div>
		</header>
		<section class="aminui-wrapper" style="overflow: hidden;">
			<div :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'"
			style="width: 280px;padding-top: 10px;padding-left: 10px;
			box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);z-index: 1002;">
				<div class="adminui-side-scroll">
					<el-scrollbar>
						<el-menu :default-active="active" router :collapse="menuIsCollapse"
								 :unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
								 <div
		class="helpmenutitle"
	>{{menutitle}}</div>
							<helpMenu :navMenus="menu" :currentCode="pmenu.id"  @itemclick="btnClick" :menuloading="menuloading"></helpMenu>
						</el-menu>
					</el-scrollbar>
				</div>

			</div>
			<div class="aminui-body el-container">
				<!--<Topbar v-if="!ismobile"></Topbar>-->
				<Transition name="slide-fade">
					<div class="adminui-main" v-if="show" id="adminui-main" style="margin-left: 0px;margin-right: 0px;padding: 20px 25px 20px;min-width: 600px;">
							<div class="page-title">{{ pmenu.name }}</div>

								<div v-html="pmenu.content" class="page-content"></div>


					</div>
				</Transition>
			</div>
		</section>
</template>

<script>
import View from '../asset/check/checkDocument/view.vue';
import helpMenu from './components/helpMenu.vue';
import WebSocket from "@/layout/components/websocket.vue";
import http from "@/utils/request";

export default {
	name: 'index',
	components: {
		WebSocket,
		helpMenu,
	},
	data() {
		return {
			settingDialog: false,
			menu: [],
			pmenu: {},
			active: '',
			entity: this.$store.state.entity,
			oldEntity: {},
			windowHeight:0,
			menuHeight:600,
			homeicon:'el-icon-home-filled',
			homespan:'首页',
			currid:"",
			rwidth:500,
			currtop:"0",
			menutitle:"操作手册",
			options:[],
			show:false,
			menuloading:false,
		}
	},
	computed: {
		menuIsCollapse() {
			return this.$store.state.global.menuIsCollapse
		},
	},
	created() {
		this.getVer();
		this.onLayoutResize();
		window.addEventListener('resize', this.onLayoutResize);


	},
	async mounted() {
		this.$cache.timer.start();
		this.getVer();
		window.addEventListener('resize', this.handleResize);
		let currvalue="";
		if(window.location.href.indexOf("?")>0){
			let searchkey= window.location.href.split("?")[1];
			if(searchkey.indexOf("=")>0){
				currvalue=searchkey.split("=")[1];
				console.log(currvalue);
			}
		}

		this.menuloading=false;
		this.options = await this.$cache.dic.options("HELPTYPE", false);
		this.loadmenu(currvalue);
		console.log(this.options);


		//var menu = this.$router.sc_getMenu();
		//this.menu = this.filterUrl(menu);
		//this.showThis();

	},
	unmounted() {
		this.$cache.timer.stop();
	},

	watch: {
		$route() {
		},
		layout: {
			handler(val) {
				document.body.setAttribute('data-layout', val)
			},
			immediate: true,
		},

	},
	methods: {
		getVer() {
			this.windowHeight=window.innerHeight;
			var minheight=300;
			if((this.windowHeight-51-120)>minheight){
				this.menuHeight=(this.windowHeight-51-120);
			}else{
				this.menuHeight=(minheight-49-120);
			}

		},
		async loadmenu(currvalue){

			let root = {};
			root.id = "";
			root.levelCode = "0000000";
			root.parentLevelCode = root.levelCode;
			root.pathCode = root.parentLevelCode + "," + root.levelCode;
			root.label = this.$t("common.default_all");
			root.icon = "el-icon-folder"
			root.children=[];
			root.isEnabled = "1";
			let queryParams = {parentLevelCode: root.levelCode,type:this.currtop};
			//treeData
			this.menu=[];
			let result = await http.post(this.$API.system.help.treeData.url, queryParams);
			if (result) {

				for (let index = 0; index < result.data.length; index++) {
					const element = result.data[index];
					let currmenu={};
					currmenu.code=element.code;
					currmenu.name=element.label;
					currmenu.id=element.id;
					currmenu.children=[];

					if(element.children!=null){
						for (let i = 0; i < element.children.length; i++) {
							const element2 = element.children[i];
							let currmenu2={};
							currmenu2.code=element2.code;
							currmenu2.name=element2.label;
							currmenu2.id=element2.id;
							currmenu2.children=[];

							if(element2.children!=null){
								for (let j = 0; j < element2.children.length; j++) {
									const element3 =  element2.children[j];
									let currmenu3={};
									currmenu3.code=element3.code;
									currmenu3.name=element3.label;
									currmenu3.id=element3.id;
									currmenu3.children=[];

									if(element3.children!=null){

									}
									currmenu2.children.push(currmenu3);
								}
							}
							currmenu.children.push(currmenu2);
						}
					}
					this.menu.push(currmenu);
				}
				this.menuloading=true;
				if(result.data.length>0){
					this.currid=currvalue==""?result.data[0].id:currvalue;
					console.log(this.currid);
					let rsp = await this.$API.system.help.findById.post({id: this.currid});
					if (rsp.code === 2000 && rsp.data) {
						console.log(rsp.data);
						this.pmenu=rsp.data;
						this.show=true;
					}
				}
			}
		},
		changetop(item){
			if(this.show){
				this.show=false;
				this.menutitle=item.label;
				this.currtop=item.value;
				this.menuloading=false;
				this.loadmenu("");
			}
		},
		handleResize() {
			this.windowHeight=window.innerHeight;
			var minheight=300;
			if((this.windowHeight-69-120)>minheight){
				this.menuHeight=(this.windowHeight-69-120);
			}else{
				this.menuHeight=(minheight-68-120);
			}
		},
		onLayoutResize() {
			this.$store.commit("SET_ismobile", document.body.clientWidth < 992)
			this.rwidth=document.body.clientWidth-280-25;
		},
		async btnClick(navMenu) {

			if(this.pmenu.id!=navMenu.id){
				this.show=false;
				let rsp = await this.$API.system.help.findById.post({id: navMenu.id});
				if (rsp.code === 2000 && rsp.data) {
					console.log(rsp.data);
					this.pmenu=rsp.data;
					this.show=true;
				}
			}
		},
	}
}
</script>
<style>
    @keyframes twinkle {
        from {
          opacity: 1.0;
        }
        50% {
          opacity: 0.4;
        }
        to {
          opacity: 1.0;
        }
      }
      .badgeflash .el-badge__content {
        animation: twinkle 2s;
        animation-iteration-count: infinite;
      }

	  .help-side-split-top {height: 49px;
		width: 49px;
    background: url(../../../public/img/sylogo.png)
      100% no-repeat;
	  margin: 0px 0px 0px 30px;
	  float: left;

}


.homenewcontextmenu {
		width: 120px;
		margin:0;
		border-radius: 0px;
		background: var(--el-bg-color-overlay);
		border: 0px solid var(--el-border-color-light);
		z-index: 3000;
		list-style-type: none;
	}
	.contextmenu hr,.homenewcontextmenu hr {
		margin:5px 0;
		border: none;
		height: 1px;
		font-size: 0px;
		background-color: var(--el-border-color-light);
	}
	.contextmenu li,.homenewcontextmenu li  {
		display: flex;
		align-items: center;
		margin:0;
		cursor: pointer;
		line-height: 36px;
		padding: 0 17px;
		color: #606266;
	}
	.contextmenu li i,.homenewcontextmenu  li i {
		font-size: 14px;
		margin-right: 10px;
	}
	.contextmenu li:hover,.homenewcontextmenu li:hover {
		color: #fff !important;
		background: linear-gradient( 118deg,rgb(72, 154, 237),rgb(72, 154, 237)) !important;;
            -webkit-box-shadow: 0 0 10px 1px rgb(72 154 237 / 70%);
            box-shadow: 0 0 10px 1px rgb(72 154 237 / 70%);

	}
	.contextmenu li.disabled,.homenewcontextmenu li.disabled {
		cursor: not-allowed;
		color: #bbb;
		background: transparent;
	}

	.tags-tip {padding:5px;}
	.tags-tip p {margin-bottom: 10px;}

	.dark .contextmenu li,.dark .homenewcontextmenu li {color: var(--el-text-color-primary);}

.homeli{
	list-style-type: none;
	display: flex;
}
.homeli .el-icon{
	height: 18px;
	width: 18px;
	margin-right: 10px;
}
.homeli .el-icon svg{
	height: 18px;
	width: 18px;

}
.homeli span{
	font-size: 15px;
	font-weight: 700;
}

.helpmenutitle{
	height: 40px;color: rgba(51, 51, 51, 1);
    font-size: 16px;padding-left: 10px;line-height: 40px;cursor: pointer;font-weight: 400;
	color: rgb(102, 142, 255);
}

.logo-bar{
	font-size: 20px;font-weight: bold;display: flex;align-items: center;
	line-height: 50px;
	padding-left: 20px;
}
.topitem{
	font-size: 16px;
    font-weight: 400;
	align-items: center;
	line-height: 50px;
	margin-right: 30px;
	color: #333333;
	cursor: pointer;
}

.topAction{
	color: rgb(102, 142, 255);
}

.adminui-main .page-title {
    font-size: 24px;
    /* color: #2C3E50; */
    padding: 24px 40px;
    border-bottom: solid 1px #e9e9e9;
	background-color: #fff;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}
.page-content{
	padding: 24px 40px;
	min-height: 100%;
	background-color: #fff;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
    transition: all 5000ms ease;
}

/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
/*
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
  */
  /* 定义过渡样式 */
.slide-fade-enter-active, .slide-fade-leave-active {
  transition: transform 0.3s, opacity 0.3s;
}
.slide-fade-enter, .slide-fade-leave-to /* 2.1.8版本及以上使用v-leave-to代替v-leave-active */ {
  transform: translateY(10%);
  opacity: 0;
}

</style>
